<template>
	<view class="order-pages">
		<!-- <view @tap.stop="handerChange(item, index)" class="flex-1 top-item" style="height: 67rpx;"
			v-for="(item, index) in topList" :key="index" >
			<view v-if="index == topIndex" class="f-title c-title flex-center" style="background-color: #169afe; height: 67rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 1" class="f-title c-title flex-center" style="background-color: #fefbec; height: 67rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 2" class="f-title c-title flex-center" style="background-color: #edfff1; height: 67rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 3" class="f-title c-title flex-center" style="background-color: #edeffe; height: 67rpx;">
				{{item.name}}
			</view>
			<view v-else-if="index % 5 == 4" class="f-title c-title flex-center" style="background-color: #f5ecff; height: 67rpx;">
				{{item.name}}
			</view>
			<view v-else class="f-title c-title flex-center" style="background-color: #ffedeb; height: 67rpx;">
				{{item.name}}
			</view>
		</view> -->
		<!-- 分类 -->
		<view class="container" v-if="!audit_mode">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view  class="scroll-view-item_H uni-bg-red" 
					@click="goclassdetail(item.gc_id)"  
					v-for="(item, index) in classList"
					:class="{'highLight':item.gc_id == currentId}"
					>{{ item.gc_name }}</view>
					</scroll-view>
		</view>
		
		<view class="search-box flex-center mg-md radius">
			<view style="width: 100%;">
				<tab @change="handerTabChange" :isLine="false" :list="tabList" :activeIndex="activeIndex*1"
					:activeColor="primaryColor" :width="100/tabList.length + '%'" height="84rpx"></tab>
			</view>
		</view>
		
		<view  @tap.stop="goShopDetailPay(item.uid)"
			class="list-item flex-center mb-md ml-md mr-md pd-lg fill-base radius-16"
			v-for="(item, index) in list" :key="index">
			
			<image mode="aspectFill" class="cover radius-16" :src="item.thumb"></image>
			<view class="flex-1 ml-md" style="max-width: 450rpx;">
				<view class="flex-between">
					<view class="f-title c-title text-bold max-270 ellipsis">{{ item.name }}</view>
					
					<view class="flex-between" style="width: 250rpx;" @tap.stop="toNavigation(item)">
						<!-- <view class="f-title c-title image-bg" :style="{color: primaryColor}">豆</view> -->
						 <view></view>
						<view class="flex-center">
							<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
							<view class="f-desc c-title">{{item.distance || '未知'}}</view>
						</view>
					</view>
				</view>
				<view class="f-caption c-caption mt-sm mb-sm ellipsis" style="height: 36rpx;">{{ item.scope || '' }}
				</view>
				<view class="flex-between mt-md">
					<!-- <view class="flex-y-center f-desc c-caption max-350 ellipsis">
						<view class="time-long flex-center">{{ item.time_long }}分钟</view>
						<view class="flex-y-baseline f-icontext c-warning ml-sm mr-sm">¥<view class="f-sm-title">
								{{ item.price }}
							</view>
						</view>
					</view> -->
					<view class="text-center max-350 ellipsis" :style="{color: primaryColor}">{{ item.address.substring(9,15) }}</view>
					<view class="item-btn flex-center f-caption c-base" :style="{ background: primaryColor }">
						选择服务
					</view>
				</view>
			</view>
		</view>

		<view v-if="false" @tap.stop="goDetail(index)"
			class="list-item flex-center mb-md ml-md mr-md pd-lg fill-base radius-16"
			v-for="(item, index) in list" :key="index">
			
			<image mode="aspectFill" class="cover radius-16" :src="item.avatar"></image>
			<view class="flex-1 ml-md" style="max-width: 450rpx;">
				<view class="flex-between">
					<view class="f-title c-title text-bold max-270 ellipsis">{{ item.user_nicename }}</view>
					
					<view class="flex-between" style="width: 250rpx;">
						<view class="f-title c-title image-bg happy_bean" :style="{color: primaryColor}">豆</view>
						<view class="flex-center">
							<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
							<view class="f-desc c-title">156km{{}}</view>
						</view>
					</view>
				</view>
				<view class="f-caption c-caption mt-sm mb-sm ellipsis" style="height: 36rpx;">{{ item.user_nicename || '' }}
				</view>
				<view class="flex-between mt-md">
					<view class="flex-y-center f-desc c-caption max-350 ellipsis">
						<view class="time-long flex-center">{{ 45 }}分钟</view>
						<view class="flex-y-baseline f-icontext c-warning ml-sm mr-sm">¥<view class="f-sm-title">
								{{ 150 }}
							</view>
						</view>
					</view>
					<view class="text-center" :style="{color: primaryColor}" v-if="true">¥{{ 100 }}</view>
					<view class="item-btn flex-center f-caption c-base" :style="{ background: primaryColor }">
						选择服务
					</view>
				</view>
			</view>
		</view>
		
		<load-more :noMore="list.current_page>=list.last_page&&list.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.length<=0&&list.current_page==1"></abnor>

		<view class="space-footer"></view>

		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="1"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import tabbar from "@/components/tabbar.vue"
	import $api from '@/api/index.js';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				audit_mode:false,
				currentId:0,
				options: {},
				loading: true,
				pageActive: false,
				topIndex: 0,
				two_class: 0,
				topList: [
					{
						name: '全部',
						id: 0
					}
				],
				activeIndex: 0,
				tabList: [{
					title: '热度',
					sort: 'top desc',
					sign: 0,
					is_sign: 1,
				}, {
					title: '价格',
					sort: 'price',
					sign: 0,
					is_sign: 1,
				}, {
					title: '销量',
					sort: 'total_sale',
					sign: 0,
					is_sign: 1,
				}, {
					title: '好评',
					sort: 'star',
					sign: 0,
					is_sign: 1,
				}],
				list: [],
				carList: {},
				haveOperItem: false,
				options: {},
				is_goods:0,
				classList: [
					{
						id: 6,
						name: "交友",
						image: "/static/main/01.png",
						path: "/service/pages/user-list?id=6",
					},
					{
						id: 2,
						name: "心灵",
						image: "/static/main/02.png",
						path: "/service/pages/user-list-other?id=2",
					},
					{
						id: 273,
						name: "疗愈",
						image: "/static/main/03.png",
						path: "/service/pages/user-list-other?id=273",
					},
					{
						id: 252,
						name: "娱乐",
						image: "/static/main/04.png",
						path: "/service/pages/user-list-other?id=252",
					},
					{
						id: 1,
						name: "课堂",
						image: "/static/main/05.png",
						path: "/service/pages/user-list-other?id=1",
					},
					{
						id: 14,
						name: "美食",
						image: "/static/main/06.png",
						path: "/service/pages/user-list-other?id=14",
					},
					{
						id: 7,
						name: "养生",
						image: "/static/main/07.png",
						path: "/service/pages/user-list-other?id=7",
					},
					{
						id: 3,
						name: "医美",
						image: "/static/main/08.png",
						path: "/service/pages/user-list-other?id=3",
					},
					{
						id: 16,
						name: "休闲",
						image: "/static/main/09.png",
						path: "/service/pages/user-list-other?id=16",
					},
					{
						id: 11,
						name: "食疗",
						image: "/static/main/10.png",
						path: "/service/pages/user-list-other?id=11",
					},
					{
						id: 10,
						name: "家政",
						image: "/static/main/11.png",
						path: "/service/pages/user-list-other?id=10",
					},
					{
						id: 17,
						name: "自媒体",
						image: "/static/main/12.png",
						path: "/service/pages/user-list-other?id=17",
					},
					{
						id: 15,
						name: "创业",
						image: "/static/main/13.png",
						path: "/service/pages/user-list-other?id=15",
					},
					{
						id: 287,
						name: "健身",
						image: "/static/main/14.png",
						path: "/service/pages/user-list-other?id=287",
					},
					{
						id: 253,
						name: "电影",
						image: "/static/main/15.png",
						path: "/service/pages/user-list-other?id=253",
					},
					{
						id: 284,
						name: "汽车",
						image: "/static/main/16.png",
						path: "/service/pages/user-list-other?id=284",
					},
					{
						id: 58,
						name: "科技",
						image: "/static/main/17.png",
						path: "/service/pages/user-list-other?id=58",
					},
					{
						id: 13,
						name: "旅游",
						image: "/static/main/18.png",
						path: "/service/pages/user-list-other?id=13",
					},
					{
						id: 286,
						name: "首饰",
						image: "/static/main/19.png",
						path: "/service/pages/user-list-other?id=286",
					},
					{
						id: 5,
						name: "酒店",
						image: "/static/main/21.png",
						path: "/service/pages/user-list-other?id=5",
					},
					{
						id: 289,
						name: "减肥",
						image: "/static/main/20.png",
						path: "/service/pages/user-list-other?id=289",
					},
					{
						id: 285,
						name: "房产",
						image: "/static/main/22.png",
						path: "/service/pages/user-list-other?id=285",
					},
					{
						id: 12,
						name: "维修服务",
						image: "/static/main/23.png",
						path: "/service/pages/user-list-other?id=12",
					},
					{
						id: 288,
						name: "康复理疗",
						image: "/static/main/24.png",
						path: "/service/pages/user-list-other?id=288",
					},
					{
						id: 18,
						name: "其它",
						image: "/static/main/25.png",
						path: "/service/pages/user-list-other?id=18",
					},
					
				]
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad(options) {
			
			let {status:status} = await this.$api.base.getAuditMode({id:1});
			this.audit_mode = status
			
			let classList = await this.$api.service.classList({
				class_id: 0
			});
			this.classList = classList
			
			console.log('userinfo')
			console.log(this.userInfo)
			this.options = options;
			this.currentId=this.options.id
			console.log('options')
			console.log(options)
			
			// 	this.is_goods = 1
			// uni.setNavigationBarTitle({
			// 	title: '商品列表'
			// })
				// await this.getallgoods()
			
			uni.setNavigationBarTitle({
				title: '附近门店'
			})
			
				await this.getList()
			
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.loading) return;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				
					// let list = await this.$api.service.classList({
					// 	class_id: this.classList[this.options.index].id
					// });
					// list.forEach((item, index) => {
					// 	this.topList.push(item)
					// })
					await this.getList(1)
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			async goclassdetail(gc_id){
				this.currentId=gc_id
				uni.pageScrollTo({
					scrollTop: 0
				})
				console.log(this.options)
				this.$util.showLoading()
				this.options.id = gc_id
				this.getList(1)
			},
			
			async getallgoods()
			{
				let data = await this.$api.service.allgoodsList({
					class_id: 996
				});
				this.list = data
				
				this.list.forEach((item, index) => {
					item.title = ''
					item.item.forEach((item2) => {
						item.title += item2.title + '   '
					})
				})
			},
			initRefresh() {
				this.initIndex(true)
			},
			
			async getList() {
				this.getNewOnlineList()
			},
			async getNewOnlineList() {
				this.loading = true
				console.log('==============')
				console.log(this.classList)
				console.log(this.options.index)
				let param= {
					p: 1,
					one_class: this.options.id,
					two_class: this.two_class,
				}
				param.lat = this.userInfo.lat
				param.lng = this.userInfo.lng
				
				let data = [];
				console.log('param')
				console.log(param)
				data = await $api.service.classShopList(param)
				this.list = data.sort((a, b) => parseFloat(a.distance) - parseFloat(b.distance))
				this.list.forEach((item, index) => {
					item.title = ''
					item.item.forEach((item2) => {
						item.title += item2.title + '   '
					})
				})
				
				this.loading = false
				this.$util.hideAll()
			},
			handerChange(item, index) {
				this.topIndex = index
				this.two_class = item.id
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.$util.showLoading()
				this.getList()
			},
			handerTabChange(index) {
				this.activeIndex = index
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.$util.showLoading()
				this.getList()
			},
			// 用户详情
			goDetail(index, page) {
				let {
					id
				} = this.list[index]
				let url = `/user/pages/detail?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			// 店铺购买详情
			goShopDetailPay(id) {
				let url = '';
				if(this.is_goods == 1)
				{
					url = `/user/pages/shop/goods-detail-pay?id=${id}`
				}else{
					url = `/user/pages/shop/shop-detail-pay?id=${id}`
				}
				console.log(url)
				this.$util.goUrl({
					url
				})
			},
			//导航--传终点的坐标即可
			toNavigation(item) {
				//根据终点地址调起地图导航
				uni.openLocation({
					longitude: parseFloat(item.lng),// 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(item.lat),// 纬度，范围为-90~90，负数表示南纬
					scale: 28, // 缩放比例
					name:item.name,//终点名称
					address:item.address,//终点详细地址
					success: function (res) {
						
					}
				});
			},
		}
	}
</script>


<style lang="scss">
	.search-box {
		width: 710rpx;
		bottom: 0;
		z-index: 9;
		overflow: hidden;
	}
	.top-item {
		float: left;
		box-sizing: border-box;
		width: 20%;
		height: 100rpx;
	}
	.list-item {
		background-color: #ffffff;
		.cover {
			width: 180rpx;
			height: 180rpx;
		}
		
		.text {
			width: 75rpx;
			height: 75rpx;
		}
		
		.image-bg {
			width: 55rpx;
			height: 55rpx;
			font-weight: 600;
			padding-top: 0rpx;
			text-align: center;
			background-position: center;
			background-size:cover;
			background-repeat: no-repeat;
			background-image: url("/static/common/avoid.png");
			opacity: 0.6;
		}
	
		.time-long {
			min-width: 72rpx;
			height: 30rpx;
			padding: 0 5rpx;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FFEEB9;
			margin-right: 16rpx;
		}
	
		.f-icontext {
			font-size: 18rpx;
		}
	
		.text-delete {
			font-size: 20rpx;
			color: #B9B9B9;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
		
		
	}
	.scroll-view-item_H {
			display: inline-block;
			height: 60rpx;
			// background-color: #E7777F;
			// color:#fff;
			// margin:10rpx;
			border-radius: 5rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 30rpx;
			padding-top: 7rpx;
			flex: 0 0 auto; /* 不伸缩，固定宽度 */
			width: 25%; /* 每项占满一行 */
			box-sizing: border-box; /* 防止padding影响宽度 */
		}
		.highLight{
			background-color: #FFEEB9;
		}
		.container {
		  display: flex;
		  justify-content: space-around; /* 可以根据需要调整对齐方式 */
		  flex-wrap: wrap; /* 允许换行 */
		}
</style>
